<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 900px;
            border: 1px red solid;

            /* 
                text-align 文字的水平对齐
                    可选值: 
                        left 向左对齐
                        right 向右对齐
                        center 居中对齐
                        justify 两端对齐
            */
            /* text-align: justify; */
            font: 50px;

        }
        span{
            font-size: 20px;
            border: 1px blue solid;

                /* 
                    vertical-align 设置元素垂直对齐的方式
                    图片也会有基线,可以使用vertical-align来消除空隙
                    可选值: 
                            baseline 默认值 基线对齐
                            top 顶端对齐
                            bottom 底部对齐
                            middle 居中对齐
                */
                vertical-align: middle;
        }
        p{
            border: 1px red solid;

        }
        img{

            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate vel culpa dolorum, odit facere deleniti cumque eum saepe. Laboriosam est nemo voluptatibus soluta voluptatum,  <span>culpa adipisci fugiat libero eius maiores.</span>
    </div>
    <p>
        <img src="/exercise/练习的截图/2.png" alt="">
    </p>
</body>
</html>